<template>
    <div style="padding:0 17px">
        <Breadcrumb/>
        <div style="display: flex;margin-top: 15px;">
            <el-button type="primary" style="margin-right: 15px" @click="addItem">新增
            </el-button>
            <el-input v-model="keyWord" placeholder="产品和技术培训名称/发布人"
                      style="width: 300px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <el-button icon="Search" type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;"
                       @click="load">搜索
            </el-button>
            <el-button type="success" style="" @click="importData">导入</el-button>
            <el-button type="success" style="" @click="exportData">导出</el-button>
        </div>

        <el-table :data="tableData" :row-style="{ height: '77px' }" border
                  style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
            <el-table-column prop="id" label="ID" width="100"/>
            <el-table-column prop="trainName" label="产品和技术培训名称" width="auto"/>
            <el-table-column prop="enterName" label="发布人姓名" width="auto"/>
            <el-table-column prop="enterDate" label="发布日期" width="auto"/>
            <el-table-column prop="fileName" label="文件名称" width="auto"/>
            <el-table-column prop="description" label="备注" width="auto"/>
            <el-table-column align="center" label="操作" fixed="right" width="180">
                <template v-slot="scope">
                    <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑</el-button>
                    <el-button type="primary" size="small" icon="Edit" @click="openFile(scope.row.fileUrl)">查看
                    </el-button>
                    <el-button v-if="this.userInformation.role === 1" type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <el-dialog title="产品和技术培训操作" v-model="operationItemDialog" :close-on-click-modal="false" :show-close="false"
                   width="600">
            <el-form label-position="top" :inline="true" :model="form" ref="form" :rules="rules">
                <el-form-item label="产品和技术培训名称" prop="trainName">
                    <el-input placeholder="产品和技术培训名称" v-model="form.trainName"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="发布人姓名" prop="enterName">
                    <el-input placeholder="发布人姓名" v-model="form.enterName"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="width: 185px" label="发布日期" prop="enterDate">
                    <el-date-picker
                            v-model="form.enterDate"
                            type="date"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择发布日期"
                    />
                </el-form-item>
                <el-form-item label="文件名称" prop="fileName">
                    <el-input placeholder="文件名称" v-model="form.fileName"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="width: 185px" label="上传文件" prop="fileUrl">
                    <el-upload
                            :before-upload="checkFileType"
                            class="avatar-uploader"
                            :action="'/api/files/upload'"
                            :on-success="photoHandleSuccess"
                            :on-error="photoHandleError"
                            :show-file-list="true"
                    >
                        <template #tip>
                            <div class="el-upload__tip">
                                {{ photoType() }}文件应小于{{ fileSizeLimit() }}
                            </div>
                        </template>
                        <el-button size="small" type="primary">上传</el-button>
                        <el-button size="small" type="danger" v-if="form.fileUrl" @click="deleteImage">删除</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="备注" prop="description">
                    <el-input placeholder="备注" v-model="form.description"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="导入" v-model="dialogImportVisible" width="520px">
            <el-form label-position="right" label-width="100px">
                <el-form-item label="模板下载:" padding-top:10px>
                    <el-button type="primary" size="small" style="" @click="exportTemplate">产品和技术培训</el-button>
                </el-form-item>
                <el-form-item label="文件" padding-top:-20px>
                    <el-upload :headers="headers"
                           :multiple="false"
                               :on-success="onUploadSuccess"
                               :on-error="onUploadError"
                               :action="serverIp+'/product-tech-train/importData'"
                               class="upload-demo">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogImportVisible = false">取消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="文件预览" v-model="openItemFileDialog" width="70%" append-to-body center>
            <iframe :src="pdfSrc" frameborder="0" style="background-color: #fff;width: 100%; height: 600px"></iframe>
            <div slot="footer" class="dialog-footer">
                <el-button @click="openItemFileDialog = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import request from "@/utils/request.js";
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {fileSizeLimit, photoType} from "@/assets/globalJS.js";
    import {serverIp} from "../../../public/static/config"

    export default {
        name: "ProductTechTrain",
        components: {Breadcrumb},
        data() {
            return {
                pdfSrc: '',
                serverIp,
                headers: {
                    token:  JSON.parse(localStorage.getItem('user')).token,
                },
                dialogImportVisible: false,
                userInformation:JSON.parse(localStorage.getItem("user")),
                keyWord: "",
                currentData: {},
                tableData: [],
                clientOptions: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                operationItemDialog: false,  // 弹窗
                openItemFileDialog: false,
                form: {},
                rules: {
                    trainName: [
                        {required: true, message: '请输入产品与技术培训名称', trigger: 'blur'},
                    ],
                },
                isEdit: false,
            }
        },
        mounted() {
            // 初始化加载用户数据
            this.load()
        },
        methods: {
            importData() {
                this.dialogImportVisible = true;
            },
            onUploadSuccess() {
                this.$message.success('上传成功');
                this.dialogImportVisible = false;
                location.reload();
            },
            onUploadError() {
                this.$message.error('上传失败');
            },
            // 模板下载
            exportTemplate() {
                window.location.href = '../xlsx/productTechTrain.xlsx'
            },
            exportData() {
                window.open(serverIp + '/product-tech-train/export?keyWord=' + this.keyWord);
            },
            // 搜索
            load() {
                request.get("/product-tech-train/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&keyWord=" + this.keyWord).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "records") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            },
            // 新增
            addItem() {
                this.operationItemDialog = true
            },
            // 编辑
            editItem(scope) {
                this.isEdit = true;
                Object.assign(this.form, scope)
                this.operationItemDialog = true
            },
            // 编辑、新增确定按钮
            submitForm(val) {
                this.form.operatorId = JSON.parse(localStorage.getItem("user")).id
                this.$refs[val].validate((valid) => {
                    if (valid) {
                        request.post("/product-tech-train/edit", this.form).then(res => {
                            if (res.code === '200') {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                })
                                this.load()
                                if (!this.isEdit) {
                                    this.clearConditions()
                                }
                                this.reset(val)
                            } else {
                                this.$message.error("操作失败" + res.msg)
                            }
                        })
                    }
                })
            },
            // 清空查询条件
            clearConditions() {
                this.keyWord = "";
            },
            reset(val) {
                this.isEdit = false;
                this.operationItemDialog = false;
                this.form = {};
                this.$refs[val].clearValidate();
            },
            // 删除确定弹窗
            deleteItem(scope) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.delete("/product-tech-train/delete/" + scope).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            treeSelectChanged(data) {
                this.currentData = data
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            },
            checkFileType(file) {
                const fileName = file.name
                const fileType = fileName.substring(fileName.lastIndexOf('.'))
                // '.xbm','.tif','pjp','.svgz','jpg','jpeg','ico','tiff','.gif','svg','.jfif','.webp','.png','.bmp','pjpeg','.avif'
                if (
                    fileType === '.pdf' ||
                    fileType === '.txt' ||
                    fileType === '.xbm' ||
                    fileType === '.tif' ||
                    fileType === '.pjp' ||
                    fileType === '.svgz' ||
                    fileType === '.jpg' ||
                    fileType === '.jpeg' ||
                    fileType === '.ico' ||
                    fileType === '.tiff' ||
                    fileType === '.gif' ||
                    fileType === '.svg' ||
                    fileType === '.jfif' ||
                    fileType === '.webp' ||
                    fileType === '.png' ||
                    fileType === '.bmp' ||
                    fileType === '.pjpeg' ||
                    fileType === '.avif'
                ) {
                    // 不处理
                } else {
                    this.$message.error(
                        '不是正确的格式文件,请上传正确的文件类型'
                    )
                    return false
                }
            },
            photoHandleSuccess(response) {
                this.form.fileUrl = `/api/file/download${response}`
                this.$message.success('上传成功');
            },
            photoType() {
                return "pdf,txt," + photoType
            },
            fileSizeLimit() {
                return "100MB"
            },
            photoHandleError() {
                this.$message.error("上传文件大小请勿超过100MB")
            },
            deleteImage() {
                this.form.fileUrl = '';
                this.$message.success('删除成功');
            },
            openFile(scope) {
                this.openItemFileDialog = true;
                this.pdfSrc = scope;
            }
        }
    }
</script>

<style scoped>

</style>
